<template>
  <div class="process">
    <div class="num">{{ currentTaskIndex + 1 }}/{{ taskList.length }}</div>
    <div class="items">
      <div class="item" 
           v-for="(item, index) in taskList" 
           :key="item.id"
           :class="getItemClass(index)"></div>
    </div>
  </div>
</template>
<script setup>
import {ref, computed} from 'vue'
import useTaskStore from '@/stores/task.js'
const store = useTaskStore()

// 过滤后的任务列表（排除提示类型）
const taskList = computed(() => {
  const types = ['罗夏墨迹', 'tat', '观影', '访谈']
  return store.taskList.filter(task => {
    return types.includes(task.type)
  })
})

// 当前任务在过滤后列表中的索引
const currentTaskIndex = computed(() => {
  const currentTask = store.taskList[store.taskIndex]
  if (!currentTask) return 0
  
  return taskList.value.findIndex(task => task.id === currentTask.id)
})

/**
 * 获取任务项的CSS类名
 * @param {number} index - 任务在过滤后列表中的索引
 * @returns {string} CSS类名
 */
const getItemClass = (index) => {
  if (index < currentTaskIndex.value) {
    return 'green' // 已完成的任务
  } else if (index === currentTaskIndex.value) {
    return 'blue' // 当前正在进行的任务
  }
  return '' // 未开始的任务
}


</script>
<style scoped lang="scss">
.process{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: .6rem;
  .num{
    margin-bottom: 10px;
  }
  .items{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .item{
      width: 30px;
      height: 6px;
      border-radius: 4px;
      margin: 0 10px;
      background: #333;
    }
    .green{
      background: #00a870;
    }
    .blue{
      background: #0d8cff;
    }
  }
}
</style>